<!-- <template>
  <div class="tech-card-wrapper" :style="{ width: width + 'px', height: height + 'px' }">
    <svg
      class="tech-card-svg"
      :width="width"
      :height="height"
      :viewBox="`0 0 ${width} ${height}`"
    >

      <polyline
        :points="borderPoints"
        :stroke="borderColor"
        :stroke-width="borderWidth"
        fill="none"
      />

      <polyline
        :points="topLinePoints"
        :stroke="borderColor"
        :stroke-width="3"
        fill="none"
      />

      <polygon
        :points="leftTrianglePoints"
        :fill="borderColor"
        opacity="0.7"
      />

      <polygon
        :points="rightTrianglePoints"
        :fill="borderColor"
        opacity="0.7"
      />
    </svg>
    <div class="tech-card-content">
      {{ name }}
    </div>
  </div>
</template> -->

<!-- <script setup>
import { computed } from 'vue'

const props = defineProps({
  name: { type: String, default: '处理中5' },
  width: { type: Number, default: 500 },
  height: { type: Number, default: 200 },
  borderColor: { type: String, default: '#6ecaff' },
  borderWidth: { type: Number, default: 6 }
})

// 计算边框多边形点
const borderPoints = computed(() => {
  const w = props.width, h = props.height, bw = props.borderWidth
  return [
    `${bw},${bw+20}`,
    `${bw},${h-bw-20}`,
    `${bw+20},${h-bw}`,
    `${w-bw-20},${h-bw}`,
    `${w-bw},${h-bw-20}`,
    `${w-bw},${bw+20}`,
    `${w-bw-20},${bw}`,
    `${bw+20},${bw}`,
    `${bw},${bw+20}`
  ].join(' ')
})

// 顶部装饰线
const topLinePoints = computed(() => {
  const w = props.width, bw = props.borderWidth
  return [
    `${bw+60},${bw+2}`,
    `${w/2-60},${bw+2}`,
    `${w/2-40},${bw+18}`,
    `${w/2+40},${bw+18}`,
    `${w/2+60},${bw+2}`,
    `${w-60-bw},${bw+2}`
  ].join(' ')
})

// 左下角三角
const leftTrianglePoints = computed(() => {
  const bw = props.borderWidth, h = props.height
  return [
    `${bw},${h-bw-36}`,
    `${bw+36},${h-bw}`,
    `${bw},${h-bw}`
  ].join(' ')
})

// 右上角三角
const rightTrianglePoints = computed(() => {
  const w = props.width, bw = props.borderWidth
  return [
    `${w-bw-36},${bw}`,
    `${w-bw},${bw+36}`,
    `${w-bw},${bw}`
  ].join(' ')
})
</script> -->

 <!-- <style scoped>
.tech-card-wrapper {
  position: relative;
  display: inline-block;
  background: none;
  overflow: visible;
}
.tech-card-svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.tech-card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: #fff;
  font-family: "微软雅黑", Arial, sans-serif;
  background: linear-gradient(180deg, rgba(34,56,74,0.95) 60%, rgba(58,78,106,0.95) 100%);
  box-sizing: border-box;
  padding: 0 20px;
  min-height: 100%;
  letter-spacing: 2px;
  font-weight: 500;
  text-shadow: 0 2px 8px #0008;
  border-radius: 0;
}
</style> -->



<script setup>
const props = defineProps({
  name: { type: String, default: '处理中' },
})
</script>
<template> 
<div class="button-container">
  <div class="button-out">
<div class="button-in">
{{ name }}
</div>
  </div>
  <div class="button-triangle triangle-common"></div>
  <div class="button-triangle2 triangle-common"></div>
  <div class="button-line"> </div>
</div>
</template>
<style scoped lang="scss">
// 定义设计稿基准宽度
$design-width: 1920;

// px 转 vw 的函数
@function px-to-vw($px) {
  @return ($px / $design-width) * 100vw;
}
.button-container{
  position: relative;
}
.button-container .button-out{
  position: absolute;
  top: 0;
  left: 0;
  width: px-to-vw(70);
  height: px-to-vw(26);
  background-color: #2475b0;

  /* 多边形裁剪 */

  clip-path: polygon(
    0% 0%, 
    0% 84%, 
    6% 100%, 
   100% 100%, 
    100% 84%, 
    100% 16%,
    94% 0%,
    66% 0%,
    64% 13%,
    30% 13%,
    26% 0%
  );
 /* box-shadow: 0 0 0 2px #0008; */
  /* transition: all 0.3s ease-in-out; */
}
.button-container .button-out .button-in{
  text-align: center;
  font-size: px-to-vw(16);
  color: #fff;
  position: absolute;
  top: px-to-vw(1);
  left: px-to-vw(1);
  
  width: px-to-vw(68);
  height: px-to-vw(24);
  background: linear-gradient(180deg, rgba(34,56,74,0.95) 60%, rgba(58,78,106,0.95) 100%);

  /* 多边形裁剪 */

  clip-path: polygon(
    0% 0%, 
    0% 84%, 
    6% 100%, 
   100% 100%, 
    100% 84%, 
    100% 16%,
    94% 0%,
    68% 0%,
    66% 13%,
    28% 13%,
    24% 0%
  );
 /* box-shadow: 0 0 0 2px #0008; */
  /* transition: all 0.3s ease-in-out; */
}
// 实现三角形
.triangle-common {
  position: absolute;
  width: 0;
  height: 0;
  border: solid transparent;
}
.button-triangle{
  top: px-to-vw(24);
  left: 0;
   border-style: solid;
   border-width: px-to-vw(3) 0 0 px-to-vw(3);
   border-color: transparent transparent transparent #008EFF;
   transform: rotate(0deg);
}
.button-triangle2{
  top: 0;
  left: px-to-vw(67);
  border-style: solid;
  border-width: 0 px-to-vw(3) px-to-vw(3) 0;
  border-color: transparent #008EFF transparent transparent;

}
.button-line{
  position: absolute; 
  top: 0;
  left: px-to-vw(23);
  width: px-to-vw(20);
  height: px-to-vw(2);
  background-color: #A8DBFF;
}
</style>
